<template>
	<view>
		<view class="rechargeM">
			<view class="rechargeM_l">
				<text>到账账户</text>
			</view>
			<view class="rechargeM_r" @tap="diaoyongmotai">
				<view class="rechargeM_r_top">
					<image :src="banking.img" mode="" class="rechargeM_img"></image>
					<text>{{banking.bank}}</text>
				</view>
				<view class="rechargeM_r_down">
					<text>2小时内到账</text>
				</view>
			</view>
		</view>
		<view class="payM">
			<view class="">
				<text>提现金额</text>
			</view>
			<view class="inputPay">
				<text>￥</text>
				<input type="text" v-model="inputval" focus clearable class="inputTT" @confirm="goto" @input="filter"
					:disabled="disable" @focus="open"/>
					<cukeyboard confirmText="付款" ref="cukeyboard" @change="change" @confirm="confirm" @hides="hides"></cukeyboard>
					
			</view>
			<view class="btn_txet">
				<text>当前账户余额￥{{allmoney}}</text>，<view type="default" id="b" @tap="quanbu">全部提现</view>
			</view>
		</view>

		<payPass ref="verify" @finish="getCode"></payPass>


	</view>

</template>

<script>
	import cukeyboard from '../../components/cu-keyboard/cu-keyboard.vue'
	import payPass from '../../components/pay-pass/pay-pass.vue'
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapState,
		mapMutations,
		mapActions
	} = createNamespacedHelpers('users')

	export default {
		components: {
			payPass,
			cukeyboard
		},
		data() {
			return {
				pass: "123456",
				inputval: '',
				banlk: [{
					_id: 1,
					bank: "工商银行",
					img: require('@/pagesD/static/gsyh.png')
				}, {
					_id: 1,
					bank: "农业银行",
					img: require('@/pagesD/static/nyyh.png')
				}, {
					_id: 1,
					bank: "建设银行",
					img: require('@/pagesD/static/jsyh.png')
				}, {
					_id: 1,
					bank: "中国银行",
					img: require('@/pagesD/static/zgyh.png')
				}],
				banking: {
					_id: 1,
					bank: "工商银行",
					img: require('@/pagesD/static/gsyh.png')
				},
				allmoney: 900,

				disable: false
			}
		},
		computed: {
			...mapState(["tatal"])
		},
		watch: {
			inputval: {
				handler(val) {
					console.log(val,"aaaa")
					this.inputval = val
				},
				deep: true
			}
		},
		onLoad() {
			if (this.tatal <= 0) {
				this.disable = true
				uni.showToast({
					icon: "none",
					title: "账号已冻结",
					duration: 3000,
					
				})
			}
		},
		methods: {
			...mapMutations(["total_"]),
			diaoyongmotai() {
				uni.showActionSheet({
					itemList: ['工商银行(5510)', '农业银行(5510)', '建设银行(5510)', "中国银行(2510)"],
					success: res => {
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						// console.log(itemList)
						this.banking = this.banlk.filter((item, index) => index == res.tapIndex)[0]


					},
					fail: function(res) {

					}
				});
			},
			goto(e) {
				console.log(e)
				this.yzbtn()


			},

			getCode(e) {
				console.log(e); //输入内容
				// const a = /[0-9]{6}/
				if (e == this.pass) {

					if (e) {
						uni.navigateTo({
							url: '/pagesC/myAssets/myAssets'
						})
						uni.showToast({
							title: "充值成功",
							duration: 1000
						})
					}

				} else {
					this.total_()
					if (this.tatal <= 0) {
						this.$refs.verify.lostBlue()
						this.disable = true
						uni.showToast({
							title: "账号已冻结,请找回密码",
							duration: 3000,
							icon: "none"
						})
					} else {
						uni.showToast({
							icon: "none",
							title: "密码错误，还剩" + this.tatal,
							duration: 1000,

						})
					}


				}
			},
			yzbtn: function() {
				this.$refs.verify.show();
			},

			filter(event) {
				let i = this.inputval;

				let num = i.charAt(i.length - 1);

				var reg = new RegExp('^[0-9]*$');

				if (!reg.test(num)) {
					this.inputval = i.substr(0, i.length - 1)
				}


			},
			quanbu() {
				this.inputval = this.allmoney
			},
			// 键盘事件
					change(e){
						this.inputval = e;
						console.log("数字改变",e);			
					},
					open(e){
						console.log("打开键盘");
						uni.hideKeyboard()
						this.$refs.cukeyboard.open();
					},
					confirm(e){
						console.log("付款",e);
						if(e>0){
							clearInterval(this.setopen)
							this.goto()
						}	
					},
					hides(){
						console.log("关闭键盘")
						
					},
					ycjp(){
						   uni.hideKeyboard();
					}


		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.rechargeM {
		width: 670rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		margin: 20rpx auto;
		background-color: white;
		padding: 60rpx 30rpx;
		border-radius: 20rpx;

		.rechargeM_l {}

		.rechargeM_r {
			.rechargeM_r_top {
				.rechargeM_img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
				}
			}

			.rechargeM_r_down {
				color: #808080;
			}
		}
	}

	.payM {
		width: 670rpx;
		padding: 60rpx 30rpx;
		margin: 0 auto;
		background-color: white;
		border-radius: 20rpx;

		.inputPay {
			font-size: 60rpx;
			border-bottom: 1px solid #CBCBCB;
			display: flex;
			justify-content: center;
			align-items: center;

			.inputTT {
				height: 70rpx;
				font-size: 60rpx;
			}
		}

		.btn_txet {
			display: flex;
			margin-top: 30rpx;

			#b::after {
				border: none;

			}

			#b {
				background-color: white;
				padding: 0;
				margin: 0;
				font-size: 30rpx;
				line-height: 40rpx;
				color: #4B70B6;
			}


		}
	}
</style>
